<template>
	<view>
		<view class="form" @click="toCreate" v-if="!form">
			<u-form :model="form" ref="uForm" label-width="160">
				<u-form-item label="头像">
					<u-avatar :src="src" size="120"></u-avatar>
				</u-form-item>
				<u-form-item label="姓名">
					<u-input v-model="form.nickName"></u-input>
				</u-form-item>
				<u-form-item label="出生日期">
					<u-input></u-input>
				</u-form-item>
				<u-form-item label="性别">
					<u-radio-group v-model="radio" @change="change">
									<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
										{{ item.name }}
									</u-radio>
								</u-radio-group>
				</u-form-item>
				<u-form-item label="手机号">
					<u-input v-model="form.phonenumber"></u-input>
				</u-form-item>
				<u-form-item label="身份证">
					<u-input v-model="form.idCard"></u-input>
				</u-form-item>
				<u-form-item label="地址">
					<u-input></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="card" v-else>
			<view class="card-item" v-for="(item,index) in cardList">
				<view class="top">就诊卡{{index+1}}</view>
				<text>姓名：{{item.name}}</text>
				<text>性别：{{item.sex}}</text>
				<text>住址：{{item.address}}</text>
				<text>出生日期：{{item.birthday}}</text>
				<u-icon name="arrow-right-double" size="40" style="position: absolute;right: 0;top: 40%;color: #666;"
				@click="toCate"></u-icon>
			</view>
		</view>
		<button class="bu" @click="toCreate" style="margin-top: 40rpx;font-size: 36rpx;width: 80rpx;">+</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				form:{
					userName: '',
					nickName: '',
					email: '',
					phonenumber: '',
					idCard: '',
					sex: '',
					avatar: ''
				},
				radio: '',
				radioList: [
					{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				cardList: []
			};
		},
		onLoad() {
			this.getUser()
			this.getCard()
		},
		methods: {
			getUser(){
				this.$request({
					url: '/prod-api/api/common/user/getInfo'
				}).then(res => {
					this.form = res.user
					if(this.form.sex === '1'){
						this.radio = '男'
					}else{
						this.radio = '女'
					}
					this.form.idCard = this.form.idCard.replace(/(\w{2})\w*(\w{4})/, '$1************$2')
				})
			},
			toCreate(){
				uni.navigateTo({
					url:'/pages/createCard/createCard'
				})
			},
			getCard(){
				this.$request({
					url: '/prod-api/api/hospital/patient/list'
				}).then(res => {
					this.cardList = res.rows.reverse()
				})
			},
			toCate(){
				uni.navigateTo({
					url:'/pages/department/department'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
		view{
			padding: 20rpx;
			.form{
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
			}
			.card{
				display: flex;
				flex-direction: column;
				.card-item{
					padding: 20rpx;
					margin-top: 40rpx;
					background-color: #fff;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					position: relative;
					.top{
						border-bottom: 4rpx solid #e4e7ed;
						color: #2979ff;
						font-weight: bold;
						font-size: 32rpx;
					}
					text{
						margin-top: 20rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}
	}
</style>
